<template>
    <pui-drawer show title="资源管理器" position="left">
        <div class="resource-drawer-content">
            <ResourceTab ref="ResourceTabRef" v-show="mainRef.nowTabIndex === '0'" @openExampleGraph="openExampleGraph" />
            <SearchTab v-show="mainRef.nowTabIndex === '1'" @onSearch="onSearch" />
            <pui-tabs :tabList="mainRef.tabList" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
        </div>
    </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'resource-content'
})
</script>
<script lang="ts" setup>
import { reactive, onMounted, watch, getCurrentInstance } from 'vue'
import ResourceTab from './ResourceTab.vue'
import SearchTab from './SearchTab.vue'
const { proxy }: any = getCurrentInstance()
const emit = defineEmits({
    onSearch: (val: any) => {},
    openExampleGraph: (val: any) => {},
})
const mainRef = reactive({
    tabList: [
        {
            name: '资源',
            id: '0'
        },
        {
            name: '搜索',
            id: '1'
        },
    ]as any[],
    nowTabIndex: '0'
})
const tabClickHandle = (e:any) => {
    mainRef.nowTabIndex = e.id
}
const getProjectList = () => {

}
const getExampleList = async () => {
    
}
const onSearch = (key: any) => {
    emit('onSearch', key)
}
const openExampleGraph = (e: any) => {
    emit('openExampleGraph', e)
}
const init = (e: any) => {
    proxy.$refs.ResourceTabRef.init(e)
}

defineExpose({
    init
})
</script>